.voice-item {
  display: flex;
  align-items: flex-start;
  padding: 2.29vw 1.665vw 0vw 1.665vw;

  &-content {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 3.33vw;
    max-width: 18vw;
    min-width: 8vw;
    border-radius: 0.2vw;
    padding: 0.8325vw;
    color: #333333;
    font-size: 1.145vw;
    line-height: 1.35vw;
    z-index: 10;
  }

  &-icon {
    width: 1.67vw;
    height: 1.67vw;
    background-repeat: no-repeat;
    background-size: 100%;
  }

  &-duration {
    color: #333333;
    font-size: 1.145vw;
    line-height: 1.35vw;
  }
}

.isReply {
  .voice-item {
    &-content {
      background-color: #E0F7FF;
      flex-direction: row-reverse;
    }
    &-icon {
      margin-left: 0.31vw;
    }
  }
}

.isMessage {
  .voice-item {
    &-content {
      background-color: #FFFFFF;
      flex-direction: row;
    }
    &-icon {
      margin-right: 0.31vw;
    }
  }
}